<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="../../static/bootstrap/css/bootstrap.min.css"
    th:href="@{~/static/bootstrap/css/bootstrap.min.css}" />
  <link rel="stylesheet" href="../../static/css/patient.css" th:href="@{~/static/css/patient.css}" />
  <link rel="stylesheet" href="../../static/css/global.css" th:href="@{~/static/css/global.css}" />
  <title>挂号缴费页</title>
</head>

<body>
  <!-- 弹窗组件 -->
  <div th:replace="~{reuse/alertBox::alertBox}"></div>
  <!-- 头部固定导航栏 -->
  <div th:replace="~{homepageFP::patNav}"></div>
  <main class="mainBox">
    <div class="container shadow-md-sm">
      <form action="#" th:action="@{/registered}" method="post" id="registerForm" class="container">
        <div class="row justify-content-center mb-3 label">
          <label for="patientName" class="col-4 col-md-1 col-form-label">
            姓名
          </label>
          <div class="col-8 col-md-7">
            <input type="text" class="form-control" th:readonly="${user}!=null?true:false"
              th:value="${user}!=null?${user.name}:null" placeholder="请输入您的姓名" name="patientName" />
          </div>
        </div>
        <div class="row justify-content-center mb-3 label">
          <label for="patientSex" class="col-4 col-md-1 col-form-label">
            性别
          </label>
          <div class="col-8 col-md-7">
            <select th:style="${user}!=null?'pointer-events: none':''" name="patientSex" class="form-select">
              <option th:selected="${user}!=null?${user.sex == '男性'}:false" value="男性">
                男性
              </option>
              <option th:selected="${user}!=null?${user.sex == '女性'}:false" value="女性">
                女性
              </option>
            </select>
          </div>
        </div>
        <div class="row justify-content-center mb-3 label">
          <label for="patientAge" class="col-4 col-md-1 col-form-label">
            年龄
          </label>
          <div class="col-8 col-md-7">
            <input type="text" class="form-control" th:readonly="${user}!=null?true:false"
              th:value="${user}!=null?${user.age}:null" placeholder="请输入您的年龄" name="patientAge" />
          </div>
        </div>
        <div class="row justify-content-center mb-3 label">
          <label for="patientIdcard" class="col-4 col-md-1 col-form-label">
            身份证号
          </label>
          <div class="col-8 col-md-7">
            <input type="text" class="form-control" th:readonly="${user}!=null?true:false"
              th:value="${user}!=null?${user.idcard}:null" placeholder="请输入您的身份证号" name="patientIdcard" />
          </div>
        </div>
        <div class="row justify-content-center mb-3 label">
          <label for="registeredType" class="col-4 col-md-1 col-form-label">
            挂号类别
          </label>
          <div class="col-8 col-md-7">
            <select name="registeredType" class="form-select" onclick="changeSection(this)">
              <option th:each="type : ${type}" th:text="${type}" th:value="${type}"></option>
            </select>
          </div>
        </div>
        <div class="row justify-content-center mb-3 label">
          <label for="registerSection" class="col-4 col-md-1 col-form-label">
            挂号科室
          </label>
          <div id="registeredSection" class="col-8 col-md-7">
            <select name="registeredSection" class="form-select" th:fragment="sectionList">
              <option th:each="sect : ${section}" th:text="${sect}" th:value="${sect}"></option>
            </select>
          </div>
        </div>
        <div class="row justify-content-center mb-3 label">
          <label for="description" class="col-4 col-md-1 col-form-label">
            病情陈述
          </label>
          <div class="col-8 col-md-7">
            <textarea type="text" class="form-control" placeholder="请描述您的病症，可不填" name="description" rows="5"></textarea>
          </div>
        </div>
        <div class="row justify-content-center mt-5">
          <div class="col-3 col-md-2">
            <button onclick="goBack()" type="button" class="btn btn-outline-primary">
              取消
            </button>
          </div>
          <div class="col-3 col-md-2">
            <button type="submit" class="btn btn-primary">确认</button>
          </div>
        </div>
      </form>
    </div>
  </main>
  <script th:src="@{~/static/bootstrap/js/bootstrap.bundle.min.js}"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script th:inline="javascript">
    const changeSection = (value) => {
      let selectedOption = value.options[value.selectedIndex];
      $("#registeredSection").load(
        `/registered?type=${selectedOption.value}`
      );
    };
  </script>
  <script type="text/javascript">
    const goBack = () => {
      window.history.go(-1);
    };
  </script>
</body>

</html>